{% extends "base.html" %}

{% block content %}

    <script type="text/javascript">
    function message_changed(data) {
        if (data.success) {
            $('#message_row_' + data.id).attr("class", "");
            $('#message_viewbutton_' + data.id).remove();
        }
    };
    
    function profile_changed(data) {
        if (data.success) {
	    $('#user_first_name').html(data.first_name);
	    $('#user_last_name').html(data.last_name);
	    $('#user_email').html(data.email);
            $('#user_desc').html(data.description);
        }
    };
    
    function remove_message(data) {
        if (data.success) {
            $('#message_row_' + data.id).remove();
        }
    };
    
    $(document).ready( function() {
        $('.message_read').click(function() {
            Dajaxice.accounts.set_message_read(message_changed, { 'message_id':$(this).data("messageid") });
        });
        
        $('#save_profile').click(function() {
            Dajaxice.accounts.save_profile_changes(profile_changed, {'first_name':$('#edit_profile_first_name1').val(), 'last_name':$('#edit_profile_last_name').val(), 'email':$('#edit_profile_email').val(), 'description':$('#edit_profile_desc').val()});            
        });
        
        $('.evidence_accept').click(function() {
            Dajaxice.achievements.evidence_accept(remove_message, { 'message_id':$(this).data("messageid") });
        });
        
        $('.evidence_decline').click(function() {
            Dajaxice.achievements.evidence_decline(remove_message, { 'message_id':$(this).data("messageid") });
        });
        
        $('.request_decline, .message_remove').click(function() {
            Dajaxice.accounts.message_remove(remove_message, { 'message_id':$(this).data("messageid") });
        });
        
        $('.request_accept').click(function() {
            Dajaxice.accounts.request_accept(remove_message, { 'message_id':$(this).data("messageid") });
        });
        
        $("#file_select").change(function() {
            $("#file_path").val($(this).val());
        });
        
        $("#file_button").click(function() {
            $("#file_select").click();
        });
    });
    </script>
    
    
    {% if user_profile %}
    
    
    {% if user.is_authenticated %}
        {% if user == user_profile.user %}
        <div id="edit_avatar" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="avatarLabel" aria-hidden="true">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h3 id="avatarLabel">Zmeniť profil</h3>
            </div>
            <div class="modal-body">
            
                <form action="." method="post" enctype="multipart/form-data">{% csrf_token %}
                <div class="row-fluid">
                    <div class="span2">Obrázok</div>
                    <div class="span10">
                        <input  id="file_select" name="avatar_image" type="file" accept="image/*" style="display:none;" />
                        <div class="input-append">
                            <input id="file_path" class="input-xlarge" type="text" placeholder="Súbor (obrázok)">
                            <a class="btn" id="file_button">Prehľadávať</a>
                        </div>
                    </div>
                </div>
                <br />
                <div class="row-fluid">
                    <button class="btn btn-primary btn-block" type="submit">Uložiť</button>
                </div>
                </form>
                
                <br />
                
                <div class="alert alert-info">
                    Po nahratí obrázku bude nutné znova načítať stránku.
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn" data-dismiss="modal" aria-hidden="true">Zavrieť</button>
            </div>
        </div>
        
        <div id="edit_profile" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="edit_profileLabel" aria-hidden="true">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h3 id="edit_profileLabel">Zmeniť profil</h3>
            </div>
            <div class="modal-body">
		<div class="row-fluid">
		  <div class="span2">Meno</div>
		  <div class="span10"><input type="text" class="input-block-level" id="edit_profile_first_name1"></div>
		</div>
		<div class="row-fluid">
		  <div class="span2">Priezvisko</div>
		  <div class="span10"><input type="text" class="input-block-level" id="edit_profile_last_name"></div>
		</div>
		<div class="row-fluid">
		  <div class="span2">Email</div>
		  <div class="span10"><input type="text" class="input-block-level" id="edit_profile_email"></div>
		</div>
		<div class="row-fluid">
		  <div class="span2">Popis</div>
		  <textarea class="span10" id="edit_profile_desc" style="margin-left:13px;"></textarea>
		</div>
		
        </div>
            <div class="modal-footer">
                <button class="btn" data-dismiss="modal" aria-hidden="true">Zavrieť</button>
                <button class="btn btn-primary" id="save_profile" data-dismiss="modal">Uložiť zmeny</button>
            </div>
        </div>
        
        {% if messages %}
            {% for message in messages %}
            
                {% if message.message_type == "UM" or message.message_type == "AM" %}
                <div id="message_{{message.id}}" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="message_{{message.id}}Label" aria-hidden="true">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                        <h3 id="message_{{message.id}}Label">{{message.header}}<small style="margin-left:10px;">
                        {% if message.author %}od <a href="{% url show_user user_id=message.author.username %}">{{ message.author.username }}</a>
                        {% endif %}</small></h3>
                        {{message.send_date|date:"D, d E Y  H:i:s T"}}
                    </div>
                    <div class="modal-body">
                        <p>{{message.text}}</p>
                    </div>
                    <div class="modal-footer">
                        <a href="{% url message_friend user_id=message.author.username %}" class="btn btn-info pull-left">Odpovedať</a>
                        <button class="btn" data-dismiss="modal" aria-hidden="true">Zavrieť</button>
                    </div>
                </div>
                {% else %}
                
                {% if message.message_type == "FR" %}
                <div id="message_{{message.id}}" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="message_{{message.id}}Label" aria-hidden="true">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                        <h3 id="message_{{message.id}}Label">{{message.header}}<small style="margin-left:10px;"> {% if message.author %}od <a href="{% url show_user user_id=message.author.username %}">{{ message.author.username }}</a>
                        {% endif %}</small></h3>
                        {{message.send_date|date:"D, d E Y  H:i:s T"}}
                    </div>
                    <div class="modal-body">
                        <p>{{message.text}}</p>
                    </div>
                    <div class="modal-footer">
                        <button class="btn btn-success pull-left request_accept" data-messageid="{{message.id}}" data-dismiss="modal" aria-hidden="true">Potvrdiť</button>
                        <button class="btn btn-danger pull-left request_decline" data-messageid="{{message.id}}" data-dismiss="modal" aria-hidden="true">Odmietnuť</button>
                        <button class="btn" data-dismiss="modal" aria-hidden="true">Zavrieť</button>
                    </div>
                </div>
                {% else %}
                {% if message.message_type == "EM" %}
                <div id="message_{{message.id}}" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="message_{{message.id}}Label" aria-hidden="true">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                        <h3 id="message_{{message.id}}Label">{{message.header}}<small style="margin-left:10px;"> {% if message.author %}od <a href="{% url show_user user_id=message.author.username %}">{{ message.author.username }}</a>
                        {% endif %}</small></h3>
                        {{message.send_date|date:"D, d E Y  H:i:s T"}}
                    </div>
                    <div class="modal-body">
                        <p><small><span class="label">{{message.evidence.user.username}}</span> sa chce pridať k vášmu achievementu <span class="label">{{message.evidence.achievement.name}}</span>, napísal:</small></p>
                        <p>{{message.evidence.description}}</p>
                        <p><small>Priložil súbor:</small></p>
                        <div class="row-fluid">
                            <div class="span6">
                            <p>{{message.evidence.filename}}</p>
                            </div>
                            <div class="span6">
                            <a target="_blank" href="/files/{{message.evidence.evidenceFile}}" class="btn btn-mini btn-info pull-right" style="margin-top:-5px;">Prevziať</a>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button class="btn btn-success pull-left evidence_accept" data-messageid="{{message.id}}" data-dismiss="modal" aria-hidden="true">Potvrdiť</button>
                        <button class="btn btn-danger pull-left evidence_decline" data-messageid="{{message.id}}" data-dismiss="modal" aria-hidden="true">Odmietnuť</button>
                        <button class="btn" data-dismiss="modal" aria-hidden="true">Zavrieť</button>
                    </div>
                </div>
                {% endif %}
                {% endif %}
                {% endif %}
                
            {% endfor %}
        {% endif %}
        
        
        {% endif %}
    {% endif %}
    
    
    <div class="container-fluid">
        <div class="row-fluid">
        
            {% if user.is_authenticated and user == user_profile.user %}
                <div class="span8">
            {% else %}
                <div class="span10">
            {% endif %}
            
                <div class="page-header">
                    <h2>{{ user_profile.user.username}} <div class="pull-right"><small>nazbieral </small> {{user_profile.user_points}}
                    <small> {% if user_profile.user_points == 1 %}bod
                            {% else %}
                                {% if user_profile.user_points >= 2 and user_profile.user_points <= 4 %}body
                                {% else %}bodov
                                {% endif %}
                            {% endif %}
                    </small></div></h2>
                    
                    <div class="row-fluid">
                    
                    <div class="span3">
                        {% if user.is_authenticated and user == user_profile.user %}
                        <a href="#edit_avatar" role="button" data-toggle="modal">
                        {% endif %}
                        {% if user_profile.image %}
                            <img width="150" height="150" src="/{{ user_profile.image.url }}" class="img-rounded" />
                        {% else %}
                            <img width="150" height="150" src="/files/users/default.gif" class="img-rounded" />
                        {% endif %}
                        {% if user.is_authenticated and user == user_profile.user %}
                        </a>
                        {% endif %}
                    </div>
                    
                    <div class="span8">
                        <div class="row-fluid">
                        <div class="span2"><small>Meno</small></div>
                        <div id="user_first_name" class="span6">{{ user_profile.user.first_name }}</div>
                        </div>
                        <div class="row-fluid">
                        <div class="span2"><small>Priezvisko</small></div>
                        <div id="user_last_name" class="span6">{{ user_profile.user.last_name }}</div>
                        </div>
                        {% if user.is_authenticated %}
                        <div class="row-fluid">
                            <div class="span2"><small>Email</small></div>
                            <div id="user_email" class="span6">{{ user_profile.user.email }}</div>
                        </div>
                        {% endif %}
                        <div class="row-fluid">
                        <div class="span2"><small>Popis</small></div>
                        <div id="user_desc" class="span6">{{ user_profile.description }}</div>
                        </div>
                    </div>
                        
                    {% if user.is_authenticated and user == user_profile.user %}
                    <div class="span1 pull-right" style="margin-right:-20px;">
                        <a href="#edit_profile" class="btn btn-mini" role="button" data-toggle="modal">
                            <i class="icon-pencil icon-white"></i>
                        </a>
                        <script type="text/javascript">			   
                            document.getElementById("edit_profile_first_name1").value = "{{ user_profile.user.first_name }}";			   
                            document.getElementById("edit_profile_last_name").value = "{{ user_profile.user.last_name }}";			   
                            document.getElementById("edit_profile_email").value = "{{ user_profile.user.email }}";			   
                            document.getElementById("edit_profile_desc").value = "{{ user_profile.description }}";
                        </script>
                    </div>
                    {% endif %}
                    
                    </div>
                    
                </div>
            </div>
                
            {% if user.is_authenticated and user == user_profile.user %}
            <div class="span4">
                <div class="well well-small" style="height:250px;">
            {% else %}
            <div class="span2">
                <div class="well well-small" style="height:100px;">
            {% endif %}
                
                <div class="row-fluid">
                    <div class="span5">
                        <h4>Správy</h4>
                    </div>
                    
                    <div class="span7" id="messages_navigation" style="display:none;margin-top:-10px;">
                    <div class="pagination pagination-mini pagination-right">
                        <ul>
                            <li><a href="#" id="prev_message">&lt;</a></li>
                            <li><a href="#" id="next_message">&gt;</a></li>
                        </ul>
                    </div>
                    </div>
                </div>
                
                
                <div class="row-fluid">
                {% if user.is_authenticated %}
                    {% if user == user_profile.user %}
                        {% if messages %}
                            {% load messages %}
                            {% list_to_columns messages as split_messages 5 %}

                            <script type="text/javascript">
                                $(document).ready( function() {
                                    $('.carousel').carousel( {interval: false});
                                    $('#messages_navigation').css("display", "block");
                                
                                    $('#next_message').click(function() {
                                        $('.carousel').carousel('next');
                                    });
                                    
                                    $('#prev_message').click(function() {
                                        $('.carousel').carousel('prev');
                                    });
                                });
                            </script>
                            
                            <div id="myCarousel" class="carousel slide">
                            <!-- Carousel items -->
                            <div class="carousel-inner">
                                {% for l in split_messages %}
                                
                                {% if forloop.first %}
                                    <div class="item active">
                                {% else %}
                                    <div class="item">
                                {% endif %}
                                    <table class="table table-condensed table-bordered">
                                        <tbody>
                                        {% for message in l %}
                                        <tr {% if not message.read %}class="error"{% endif %} id="message_row_{{message.id}}">
                                            <td>{{ message.header }}
                                            <small style="margin-left:10px;">{% if message.author %}od <a href="{% url show_user user_id=message.author.username %}">{{ message.author.username }}</a>{% endif %}</small>
                                            
                                            <div class="pull-right">
                                            
                                            <a href="#message_{{message.id}}" class="message_read" role="button" data-toggle="modal" data-messageid="{{message.id}}"><i class="icon-eye-open icon-white"></i></a>
                                            <!--
                                            {% if not message.read %}
                                            <button id="message_viewbutton_{{message.id}}" class="btn btn-mini message_read" data-messageid="{{message.id}}"><i class="icon-ok icon-white"></i></button>
                                            {% endif %}
                                            -->
                                            
                                            {% if message.message_type != "EM" %}
                                            <a href="#message_remove_{{message.id}}" class="message_remove" role="button" data-toggle="modal" data-messageid="{{message.id}}"><i class="icon-remove icon-white"></i></a>
                                            {% endif %}
                                            
                                            </div>
                                            
                                            </td>

                                        </tr>
                                        {% endfor %}
                                        </tbody>
                                    </table>
                                    
                                </div>
                                {% endfor %}
                            </div>
                            </div>
                        {% else %}
                            <div class="badge badge-success">
                                Žiadne správy.
                            </div>
                        {% endif %}
                    {% else %}
                        <a class="btn btn-large btn-primary btn-block" href="{% url message_friend user_id=user_profile.user.username %}">Nová správa</a>
                    {% endif %}
                    
                    </div>
                
                {% else %}
                    <span class="text-error">Prihláste sa pre odoslanie správy.</span>
                {% endif %}
                
                </div>
                
            </div>
        </div>
        
        <div class="row-fluid">
        
            <div class="span6">
                <h4>Naposledy splnené</h4>
                
                {% if fulf_done_list %}
                
                <table class='table table-striped table-bordered'>
                    <thead>
                        <tr>
                            <th>Názov</th>
                            <th>Body</th>
                    <!--<th>
                    Autor
                    </th>-->
                        <th>Dátum a čas splnenia</th>
                        </tr>
                    </thead>
                    
                    <tbody>
                    
                    {% for a in fulf_done_list %}
                        <tr>
                            <td>
                                <a href="{% url show_one_achievement achievement_id=a.achievement.uuid %}">{{ a.achievement.name }}</a>
                            </td>
                            <td>
                            <span class="badge">{{ a.achievement.points }}</span>
                            {% if a.achievement.points == 1 %}bod
                            {% else %}
                                {% if a.achievement.points >= 2 and a.achievement.points <= 4 %}body
                                {% else %}bodov
                                {% endif %}
                            {% endif %}
                            </td>
                            <td>
                                {{ a.date_achieved }}
                            </td>
                        </tr>
                    {% endfor %}
                    
                    </tbody>
                    
                </table>
                {% else %}
                <div class="alert alert-info">
                    Tento používateľ nesplnil žiadne achievementy.
                </div>
                {% endif %} 
                
                
                <h4>V priebehu</h4>
                
                {% if fulf_inprogress_list %}
                
                <table class='table table-bordered'>
                <thead>
                    <tr>
                        <th>Názov</th>
                        <th>Body</th>
                        <th>Priebeh</th>
                    </tr>
                </thead>
                
                <tbody>
                
                {% for a in fulf_inprogress_list %}
                    
                        <tr>
                        <td style="width:100px;">
                        <a href="{% url show_one_achievement achievement_id=a.achievement.uuid %}">{{ a.achievement.name }}</a>
                        </td>
                        <td style="width:100px;">
                        {% if a.achievement.points == 0 %}
                            <span class="label">Bez odmeny</span>
                        {% else %}
                            {% if a.achievement.points == 1 %}
                                <span class="badge badge-info">{{ a.achievement.points }}</span> bod
                            {% else %}
                                <span class="badge badge-info">{{ a.achievement.points }}</span> bodov
                            {% endif %}
                        {% endif %}
                        </td>
                        <td>
                        {% if a.achievement.progressMax == 0 %}
                        <span class="label">V stave dokazovania.</span>
                        {% else %}
                        <div class="progress progress-success progress-striped" style="margin-bottom:-1px;">
                            <div class="bar" style="width: {% widthratio a.progress a.achievement.progressMax 100 %}%;"></div>
                        </div>
                        {% endif %}
                        </td>
                        </tr>
                {% endfor %}
                </tbody>    
                </table>
                
                {% else %}
                <div class="alert alert-info">
                    Tento používateľ práve neplní žiadne achievementy.
                </div>
                {% endif %}
            </div>
            
            
            <div class="span6">
                <h4>Vlastné</h4>
                
                <!-- Tu pridu -->
                {% if achiev_list %}
		  <table class='table table-striped table-bordered'>
                    <thead>
                        <tr>
                            <th>Názov</th>
                            <th>Body</th>
                    <!--<th>
                    Autor
                    </th>-->
                        <th>Dátum a čas vytvorenia</th>
                        </tr>
                    </thead>
                    
                    <tbody>
                    
                    {% for a in achiev_list %}
			<tr>
			  <td>
			    <a href="{% url show_one_achievement achievement_id=a.uuid %}">{{ a.name }}</a>
			  </td>
			  <td>
                            <span class="badge">{{ a.points }}</span>
                            {% if a.points == 1 %}bod
                            {% else %}
                                {% if a.points >= 2 and a.points <= 4 %}body
                                {% else %}bodov
                                {% endif %}
                            {% endif %}
                         </td>
                         <td>
                            {{ a.pub_date }}
                         </td>
			</tr>
                    {% endfor %}
                    
                    </tbody>
                    
		  </table>               
                {% else %}
                <div class="alert alert-info">
                    Tento používateľ nevytvoril žiadne achievementy.
                </div>
                {% endif %}
            </div>
        </div>
        
    </div>
    
    {% else %}
        <div class="alert">
            <strong>Chyba!</strong> Tento používateľ nebol nájdený.
        </div>
    {% endif %}

{% endblock %}